<template>
	<div class="serve" @scroll.passive="getScroll($event)">
		<div class="title">
			创建服务对象咨询服务档案记录
		</div>
		<div :class="[Top?'top0':'']">
			<a-steps style="width: 800px;margin: 20px auto;" :current="tab" size="small">
				<a-step title="基础内容" />
				<a-step title="过程记录" />
				<a-step title="评估与建议" />
			</a-steps>
			<a-descriptions class="border c-p-10" title="服务对象信息">
				<a-descriptions-item label="从属项目">
					阿里某某某某项目
				</a-descriptions-item>
				<a-descriptions-item label="姓名">
					胡孝顺
				</a-descriptions-item>
				<a-descriptions-item label="编号">
					ALICHILDCM001C01DCZCIAF
				</a-descriptions-item>
				<a-descriptions-item label="联系电话">
					13800000000
				</a-descriptions-item>
			</a-descriptions>
			<div class="c-m-t-10">
				<a-button size="large" type="default" v-show="tab==0" class="login-button c-m-r-20">取消</a-button>
				<a-button size="large" type="primary" v-show="tab==0" class="login-button" @click="tab=1">下一步</a-button>
				<a-button size="large" type="default " v-show="tab==1" class="login-button" @click="tab=0">上一步</a-button>
				<a-button size="large" type="default " v-show="tab==2" class="login-button c-m-r-20" @click="tab=1">上一步</a-button>
				<a-button size="large" type="primary " v-show="tab==2" class="login-button" @click="success">提交审核</a-button>
			</div>
		</div>
		<div v-show="tab==0">
			<a-descriptions class="border c-m-t-20 c-p-10" title="求助渠道">
				<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
					<a-radio-group v-model="form.resource">
						<a-radio value="1">
							本人求助
						</a-radio>
						<a-radio value="2">
							根据探访名单
						</a-radio>
						<a-radio value="3">
							外展
						</a-radio>
						<a-radio value="4">
							他人转介
						</a-radio>
						<a-radio value="5">
							机构/部门转介
						</a-radio>
						<a-radio value="6">
							其他
						</a-radio>
					</a-radio-group>
					<a-form-model-item v-show="form.resource==4||form.resource==5" ref="name" label="转介者姓名">
						<a-input class="w-800" v-model="form.name" />
					</a-form-model-item>
					<a-form-model-item v-show="form.resource==4||form.resource==5" label="与服务对象关系">
						<a-input class="w-800" />
					</a-form-model-item>
					<a-form-model-item v-show="form.resource==4||form.resource==5" label="转介者性别">
						<a-radio-group v-model="form.sex">
							<a-radio value="1">
								男
							</a-radio>
							<a-radio value="2">
								女
							</a-radio>
						</a-radio-group>
					</a-form-model-item>
					<a-form-model-item v-show="form.resource==4||form.resource==5" label="转介者联系电话">
						<a-input class="w-800" />
					</a-form-model-item>
					<a-form-model-item v-show="form.resource==4||form.resource==5" label="转介者住址">
						<a-input class="w-800" />
						<a-input class="w-800" v-model="form.address" type="textarea" placeholder="详细地址" />
					</a-form-model-item>
					<a-form-model-item v-show="form.resource==6" label="其他">
						<a-input class="w-800" v-model="form.desc" type="textarea" placeholder="详细地址" />
					</a-form-model-item>
				</a-form-model>
			</a-descriptions>
			<a-descriptions class="border c-m-t-20 c-p-10" title="服务对象面临的问题">
				<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
					<a-form-item label="问题性质">
						<a-select mode="tags" style="width: 100%" :token-separators="[',']">
							<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
								选项{{ i }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-model-item label="服务对象情况">
						<a-input class="w-800" v-model="form.desc1" type="textarea" placeholder="建议100字" />
					</a-form-model-item>
					<a-form-model-item label="提出面临的问题">
						<a-input class="w-800" v-model="form.desc2" type="textarea" placeholder="建议100字" />
					</a-form-model-item>
					<a-form-model-item label="期望获得的帮助">
						<a-input class="w-800" v-model="form.desc3" type="textarea" placeholder="建议100字" />
					</a-form-model-item>
					<a-form-model-item label="服务对象尝试过的应付方法">
						<a-input class="w-800" v-model="form.desc4" type="textarea" placeholder="建议100字" />
					</a-form-model-item>
					<a-form-model-item label="危机程度">
						<a-radio-group v-model="form.weiji">
							<a-radio value="1">
								低
							</a-radio>
							<a-radio value="2">
								中
							</a-radio>
							<a-radio value="2">
								高
							</a-radio>
						</a-radio-group>
					</a-form-model-item>
				</a-form-model>
			</a-descriptions>
		</div>
		<div v-show="tab==1">
			<div class="border c-m-t-20 c-p-10">
				<div class="tit">过程记录</div>
				<a-button class="c-m-b-20 login-button" size="large" type="primary" @click="creat()">创建</a-button>
				<a-collapse>
					<a-collapse-panel key="1" header="日期：2020-11-28 11:00 地点：服务对象家中 形式：面谈">
						<p>日期：2020-11-28 11:00 地点：服务对象家中 形式：面谈</p>
					</a-collapse-panel>
				</a-collapse>
			</div>
		</div>
		<a-drawer title="新增过程记录" :width="720" :visible="visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
			<a-descriptions>
			    <a-descriptions-item label="所属项目">
			     项目名称
			    </a-descriptions-item>
			    <a-descriptions-item label="姓名">
			      姓名
			    </a-descriptions-item>
			    <a-descriptions-item label="档案编号">
					A123456789ABC
			    </a-descriptions-item>
			  </a-descriptions>
			<a-form :form="form" layout="vertical">
				<a-row :gutter="16">
				  <a-col :span="12">
				    <a-form-item label="时间">
				      <a-date-picker
				        style="width: 100%"
				        :get-popup-container="trigger => trigger.parentNode"
				      />
				    </a-form-item>
				  </a-col>
					<a-col :span="12">
						<a-form-item label="地点">
							<a-input placeholder="请输入地点" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="形式">
							<a-input placeholder="请输入形式" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="12">
						<a-form-item label="接触对象">
							<a-input placeholder="请输入接触对象" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="人数">
							<a-input placeholder="请输入人数" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="目标达成">
							<a-radio-group v-model="form.pingfen">
								<a-radio value="1">
									完全达成(5)
								</a-radio>
								<a-radio value="2">
									大部分达成(4)
								</a-radio>
								<a-radio value="3">
									达成一半(3)
								</a-radio>
								<a-radio value="4">
									达成少部分(2)
								</a-radio>
								<a-radio value="5">
									未达成(1)
								</a-radio>
							</a-radio-group>
						</a-form-item>
						<a-input v-model="form.mubiao" type="textarea" placeholder="请输入" />
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="介入反思">
							<a-input placeholder="请输入介入反思" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="下一步跟进计划">
							<a-input placeholder="请输入下一步跟进计划" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="项目周期">
							<a-range-picker v-decorator="[
										   'dateTime',
										   {
										     rules: [{ required: true, message: '请选择项目周期' }],
										   },
										 ]" />
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
			<div :style="{
			          position: 'absolute',
			          right: 0,
			          bottom: 0,
			          width: '100%',
			          borderTop: '1px solid #e9e9e9',
			          padding: '10px 16px',
			          background: '#fff',
			          textAlign: 'right',
			          zIndex: 1,
			        }">
				<a-button :style="{ marginRight: '8px' }" @click="onClose">
					取消
				</a-button>
				<a-button type="primary" @click="tijiao">
					提交
				</a-button>
			</div>
		</a-drawer>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tab: 0,
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 14
				},
				form: {
					resource: '1',
					sex: '1',
					weiji: '1',
					pingfen: '1',
				},
				Top: false,
				rules: {
					name: [{
							required: true,
							message: '请输入',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: 'Length should be 3 to 5',
							trigger: 'blur'
						},
					],
					region: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					date1: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					type: [{
						type: 'array',
						required: true,
						message: '请选择',
						trigger: 'change',
					}, ],
					resource: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}, ],
					desc: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
				},
				visible:false,
			}
		},
		methods: {
			handleSubmit() {

			},
			getScroll(event) {
				console.log(event.target.scrollTop)
			},
			activeKey(key) {
				console.log(key);
			},
			creat() {
				this.visible = true;
			},
			onClose() {
				this.visible = false;
			},
			tijiao(){
				let that = this;
				this.$confirm({
					title: '保存过程记录',
					content: '面谈后是否对服务对象面临问题了解足够，并共同协商介入计划',
					okText: '是，进入评估阶段',
					cancelText: '否，还需继续了解',
					onOk() {
						that.visible = false;
						that.tab = 2;
					},
					onCancel() {
						that.visible = false;
					},
				  });
			},
			success() {
			  this.$message.success('提交成功，请等待审核');
			},
		}
	}
</script>

<style>
	.serve {
		width: 1200px;
		margin: 0 auto;
		text-align: left;
		position: relative;
	}

	.title {
		font-weight: bold;
		font-size: 24px;
	}

	.border {
		border: 1px solid #D9D9D9;
	}

	.top0 {
		position: fixed;
		top: 50px;
		left: 0;
	}

	.w-800 {
		width: 800px;
	}

	.tit {
		margin-bottom: 20px;
		color: rgba(0, 0, 0, 0.85);
		font-weight: bold;
		font-size: 16px;
		line-height: 1.5;
	}
</style>
